<template>
  <div class="home-container">
    <!--导航栏-->
    <van-nav-bar class="home-heaer-bar" fixed>
      <van-image slot="left" class="logo" :src="logo" />
      <van-button slot="title" type="info" size="small" round icon="search" to="/search">搜索</van-button>
    </van-nav-bar>
    <!--导航栏-->
    <van-tabs class="channel-tabs" v-model="active" animated swipeable>
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <!--列表组件-->
        <ArticleList :channel="item" />
      </van-tab>
      <div slot="nav-right" class="placeholder"></div>
      <div slot="nav-right" class="hamburger-btn" @click="isChennelEditShow = true"><i class="toutiao toutiao-gengduo"></i></div>
    </van-tabs>
    <!--频道弹出层-->
    <van-popup v-model="isChennelEditShow" closeable close-icon-position="top-left" position="bottom" :style="{ height: '99%' }">
      <ChannelEdit :myChannels="channels" :active="active" @update-active="onUpdateActive" />
    </van-popup>
  </div>
</template>

<script>
// 导入tabs组件的数据
import { getUserChannels } from '@/api/user'
// 导入文章列表组件
import ArticleList from './components/ArticleList'
// 导入频道编辑组件
import ChannelEdit from './components/ChennelEdit.vue'
// 用容器的 mapState 方法映射到组件中
import { mapState } from 'vuex'
import { getItem } from '../../utils/storage.js'

export default {
  name: 'Home',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0, // 默认显示第一个频道
      channels: [], // 频道列表
      isChennelEditShow: false, // 控制编辑频道弹出层的显示状态
      logo: require('@/assets/logo.png') // logo
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created () {
    this.loadChannels()
  },
  methods: {
    // 请求频道
    async loadChannels () {
      try {
        // const { data } = await getUserChannels()
        // this.channels = data.data.channels
        let channels = []
        if (this.user) {
          // 已登录，请求获取用户频道列表
          const { data } = await getUserChannels()
          this.channels = data.data.channels
        } else {
          // 未登录，判断是否有本地的频道列表数据
          const loadChannels = getItem('TOUTIAO_CHANNELS')
          // 有，拿来使用
          if (loadChannels) {
            channels = loadChannels
          } else {
            // 没有，请求获取默认频道列表
            const { data } = await getUserChannels()
            this.channels = data.data.channels
          }
        }
        this.channels = channels
      } catch (err) {
        this.$toast('获取频道数据失败')
      }
    },
    // 传递索引值
    onUpdateActive (index, isChennelEditShow = true) {
      // console.log('home', index)
      // 更新激活的频道项
      this.active = index
      // 弹窗关闭
      this.isChennelEditShow = false
    }
  }
}
</script>

<style scoped lang="less">
.home-container{
  padding-top: 90px;
  padding-bottom: 50px;
}
.home-heaer-bar{
  background-color: #efe614;
  /deep/ .van-nav-bar__content{
    justify-content: space-between;
    padding: 0 10px;
    .logo{
      width: 114px;
      height: 25px;
    }
    .van-nav-bar__left{
      padding-right: 0;
    }
    .van-nav-bar__title{
      margin-right: 0;
    }
  }
  .van-button--info{
    background-color: #fff;
    border: none;
    padding: 0 2rem;
  }
  .van-icon{
    color: #000;
  }
}
.van-nav-bar__title{
  max-width: 100%;
}

/deep/ .channel-tabs{
  .van-tab{
    border-right: 1px solid #edeff3;
  }
  .hamburger-btn{
    width: 40px;
    height: 44px;
    position: fixed;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,.902);
  }
  .hamburger-btn::before{
    content: "";
    background-image: linear-gradient(to right, rgb(237, 239, 243), transparent);
    width: 1px;
    height: 32px;
    position: absolute;
    left: 0;
    top: 6px;
  }
  .placeholder{
    width: 40px;
    flex-shrink: 0;
  }
  .van-tabs__line{
    width: 20px;
    background-color: #efe614;
  }
  .van-tabs__wrap{
    width: 100%;
    position: fixed;
    left: 0;
    top: 46px;
    z-index: 1;
  }
}
</style>
